<%@ page pageEncoding="UTF-8"%>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<%@ taglib prefix="isperp" uri="/WEB-INF/tlds/isperp.tld"%>

<script type="text/javascript">
    var dbName_="";
	function getCategoryTreeNode() {
		return "categoryId=" + $("#dbName").val();
	};
	function changeDbName() {
		$.ajax({
			url : 'individuation/individuationForm/getPinYin?src=' + $("#name").val(),
			success : function(data) {
				if (data)
					$("#dbName").val(data);
			}
		});
	}
</script>

<div id="createWizard" class="wizard box tabbedBox no-border">

	<div class="header">
		<ul class="steps">
			<li><a class="current" href="#wiz_tab1">1、表单定义</a>
			</li>
			<li><a href="#wiz_tab2">2、表单字段</a>
			</li>
			<li><a href="#wiz_tab3">3、表单代码</a>
			</li>
			<li><a href="#wiz_tab4">4、预览</a>
			</li>
		</ul>
	</div>
	<div class="content tabbed" style="padding:0">
		<div id="wiz_tab1">
			<form:form commandName="model" cssClass="validate"
				id="individuationFormForm"
				action="individuation/individuationForm/save">
				<form:hidden path="id" />
				<table class=" form-table">
					<tbody>
						<tr style="display:none">
							<td class="td1">areMainForm：</td>
							<td class="td2"><form:input path="areMainForm" value="1" />
							</td>
						</tr>
						<tr>
							<td class="td1">名称：</td>
							<td class="td2"><form:input path="name" cssClass="required"
									onkeydown="changeDbName()" onkeyup="changeDbName()" /></td>
						</tr>
						<%-- <tr>
							<td class="td1">所属类别：</td>
							<td class="td2"><form:input path="categoryId" /></td>
						</tr> --%>
						<tr>
							<td class="td1">列数：</td>
							<td class="td2"><form:input path="col" /></td>
						</tr>
						<tr>
							<td class="td1">表名：</td>
							<td class="td2"><form:input path="dbName"
									cssClass="required" /></td>
						</tr>

					</tbody>
				</table>
			</form:form>

		</div>

		<div id="wiz_tab2" style="width:100%;">
			<isperp:grid url="" autoload="false"
				gridId="categoryPropertyGrid" cusFormatterActions="true"
				showPager="false" showSearchbar="false" cusDialogSize="normal"
				cusEditUrl="individuation/category/property/edit" autowidth="true"
				cusDeleteUrl="individuation/category/property/delete"
				ondbClickRowEvent="categoryPropertyGrid.edit(rowid);"
				beforeCreateAction="getCategoryTreeNode();">

				<jsp:attribute name="toolbar">
	 				<isperp:toolbar id="categoryPropertyToolbar">
						<isperp:button id="categoryCreate" icon="icon-plus" text="新增"
							onclick="categoryPropertyGrid.create();"></isperp:button>
	 				</isperp:toolbar>
				 	</jsp:attribute>
				<jsp:body> 
					<isperp:column name="id" title="ID" width="60"></isperp:column> 
					<isperp:column name="name" title="属性名称" width="150">
					</isperp:column>
					<isperp:column name="data_type" title="类型" width="70">
					</isperp:column>
					<isperp:column name="default_value" title="默认值" width="70">
					</isperp:column>	
					<isperp:column name="notnull" title="必填项" width="120"
						align="center" formatter="checkbox">
			    	 </isperp:column>
					<isperp:column name="order_num" title="排序" width="50">
					</isperp:column>
				</jsp:body>

			</isperp:grid>

		</div>
		<div id="wiz_tab3">
			<form:form commandName="model" cssClass="validate"
				id="individuationFormForm2"
				action="individuation/individuationForm/save">
				<form:hidden path="id" />
				<table class=" form-table">
					<tbody>
						<tr>
							<td class="td1">操作：</td>
							<td class="td2"><input type="button" onclick="reSetHtml()"
								value="重置" class="button" id="reSetBtn"> 
							</td>
						</tr>
						<tr style="">
							<td class="td1">页面代码：</td>
							<td class="td2"><form:textarea path="chtml"
									onchange="reView()" cssStyle="height:350px;width:90%"
									cssClass="editor required" />
							</td>
						</tr>
					</tbody>
				</table>
			</form:form>

		</div>
		<div id="wiz_tab4">
		  <div id="testChtml"
						style="height:200px;width:90%" class="editor required"></div>
		</div>
	</div>
	<isperp:wizButtonList buttonListId="bpmConfigWizardBtns">
	</isperp:wizButtonList>
</div>


<script type="text/javascript">
	var wizCreate = isperp.wizard({
		wizardId : "createWizard"
	});
	var createWizard_Event1 = function(index, obj) {
	    dbName_ = $("#dbName").val();
	    
	    categoryPropertyGrid.jqGrid.setGridParam({
				url : "individuation/category/property/listByCategory?categoryId=" + dbName_
			});
			categoryPropertyGrid.search();
		isperp.submitForm({
			formId : "individuationFormForm",
			success : function() {
			    dbName_=$("#dbName").val();
				return true;
			}
		});
	};

	var createWizard_Event2 = function(index, obj) {
		//生成表或者增加字段
		var dbName = $("#dbName").val();
		if (dbName) {
			$.ajax({
				url : 'individuation/category/property/createDbTable',
				data : {
					dbName : dbName
				},
				success : function(data) {
					if (!data.success) {
						//alert(data.msg);
					} else {
						//alert("成功创建表");
					}
				}

			});
		}
		
		if($("#chtml").val()=="")
		{
		   reSetHtml();
		}
	};

	function formatCode() {
		var htmlStr = $("#chtml").val();
		$.ajax({
			url : 'individuation/categoryPropertySetting/formatHtmlStr',
			type : 'POST',
			data : {
				htmlStr : htmlStr
			},
			success : function(data) {
				if (data) {
					$("#chtml").val(data);
					isperp.initElement("#individuationPropertyTable");
				}
			}

		});
	}

	var createWizard_Event3 = function(index, obj) {
         $("#testChtml").html($("#chtml").val());
         isperp.submitForm({
			formId : "individuationFormForm2",
			success : function() {
				return true;
			}
		});
	};

	function createList() {
		$("[dataType='list']").each(function() {
			var objId = $(this).data("id");
			var targetId = 'div_list_' + objId;
			var objOption = $(this).data("option");
			if (objId) {
				var relationId = 'test';
				var option = {
					targetId : targetId,
					readOnly : false,
					relationId : relationId,
					tableName : '',
					columns : []
				};
				var tOption = eval('(' + objOption + ')');
				option.tableName = tOption.tableName;
				option.columns = tOption.columns;
				isperp.createEasyTable(option);
			}
		});
	}

	function reSetHtml() {
		var categoryId = $("#dbName").val();
		//UE.getEditor('testChtml').setContent('', false);
		$.getJSON("individuation/category/property/listByCategory?categoryId=" + categoryId, function(data) {
			var htmlStr = "<table id='individuationPropertyTable' class='form-table' style='table-layout: auto'>";
			var col = $("#col").val();
			var rStr = "";
			var tdIndex = 1;
			var tclassify = "";
			var row = "";
			$(data).each(function(index, item) {
				var tdInnerHtml = item.td_inner_html;
				var classify = item.classify;

				if (col == 2) {
					if (index == 0) {
						tclassify = classify;
						row = "<tr><td colspan='4'><div class='pheader' style='padding:0px;'><h3>" + classify + "</h3></div></td></tr>"
						htmlStr += row;
					} else {
						if (classify != tclassify) {
							htmlStr += rStr;
							rStr = "";
							tdIndex = 1;
							row = "<tr><td colspan='4'><div class='pheader'><h3>" + classify + "</h3></div></td></tr>"
							htmlStr += row;
							tclassify = classify;
						}
					}
					//如果占用一行
					if (tdInnerHtml.indexOf('colspan') > -1 && rStr == "") {
						rStr = "<td class='td1' >" + item.name + "：</td><td class='td2' colspan='3'>" + createControl(item) + "</td>";
						row = "<tr>" + rStr + "</tr>";
						htmlStr += row;
						tdIndex = 1;
						rStr = "";
					} else if (tdIndex == 1) {
						rStr += "<td class='td1' "+tdInnerHtml+">" + item.name + "：</td><td class='td2'>" + createControl(item) + "</td>";
						tdIndex++;
					} else if (tdIndex == 2) {
						rStr += "<td class='td1' "+tdInnerHtml+">" + item.name + "：</td><td class='td2'>" + createControl(item) + "</td>";
						row = "<tr>" + rStr + "</tr>";
						htmlStr += row;
						tdIndex = 1;
						rStr = "";
					}
				} else if (col == 3) {

					if (index == 0) {
						tclassify = classify;
						row = "<tr><td colspan='6'><div class='pheader' style='padding:0px;'><h3>" + classify + "</h3></div></td></tr>"
						htmlStr += row;
					} else {
						if (classify != tclassify) {
							htmlStr += rStr;
							rStr = "";
							tdIndex = 1;
							row = "<tr><td colspan='6'><div class='pheader'><h3>" + classify + "</h3></div></td></tr>"
							htmlStr += row;
							tclassify = classify;
						}
					}
					if ((tdInnerHtml.indexOf('colspan') > -1) && rStr == "") {
						rStr = "<td class='td1' >" + item.name + "：</td><td class='td2' colspan='5'>" + createControl(item) + "</td>";
						row = "<tr>" + rStr + "</tr>";
						htmlStr += row;
						tdIndex = 1;
						rStr = "";
					} else if (tdIndex == 1) {
						rStr += "<td class='td1' "+tdInnerHtml+">" + item.name + "：</td><td class='td2'>" + createControl(item) + "</td>";
						tdIndex++;
					} else if (tdIndex == 2) {
						rStr += "<td class='td1' "+tdInnerHtml+">" + item.name + "：</td><td class='td2'>" + createControl(item) + "</td>";
						tdIndex++;
					} else if (tdIndex == 3) {
						rStr += "<td class='td1' "+tdInnerHtml+">" + item.name + "：</td><td class='td2'>" + createControl(item) + "</td>";
						row = "<tr>" + rStr + "</tr>";
						htmlStr += row;
						tdIndex = 1;
						rStr = "";
					}
				}
			});
			if (rStr != "") {
				row = "<tr>" + rStr + "</tr>";
				htmlStr += row;
			}
			htmlStr += "</table>";
			$("#chtml").val(htmlStr);
			createList();
			formatCode();

		});

	}
	
		//构建自定义属性输入控件
	function createControl(item) {
		var controlStr = "";
		var cssCls = "";
		switch (item.data_type) {
		case "string":
			controlStr = createInputElement(item, cssCls);
			break;
		case "number":
			cssCls = "number";
			item.data_type = "text";
			controlStr = createInputElement(item, cssCls);
			break;
		case "list":
			controlStr = "<div id='div_list_"+item.id+"' dataType='list' data-id=\""+item.id+"\" data-option=\""+item.items+"\"></div>";
			break;
		case "date":
		case "datetime":
			controlStr = createInputElement(item, cssCls);
			break;
		case "textarea":
			controlStr = "<textarea name='c_" + item.id + "'  id='c_" + item.id + "' data-id='" + item.id + "' class='" + cssCls;

			if (item.notnull) {
				controlStr += " required";
			}
			controlStr += "'></textarea>";
			break;

		case "select":
			var itemDataSource = eval('(' + item.items + ')');
			controlStr = "<select name='c_" + item.id + "' id='c_" + item.id + "'   data-id='" + item.id + "' ";
			if (item.notnull) {
				controlStr += " class='required'>";
			} else {
				controlStr += " >";
			}
			controlStr += "<option value=''></option>";
			if (itemDataSource) {
				$(itemDataSource).each(function(i, it) {
					controlStr += "<option value='"+it.value+"'>" + it.name + "</option>";
				});
			}
			controlStr += "</select>";
			break;
		case "custom":
			controlStr += item.items;
			break;
		case "checkboxs":
			var itemDataSource = eval('(' + item.items + ')');
			controlStr += "<input  style='display:none' id='c_"+item.id+"' name='c_"+item.id+"' >";
			if (itemDataSource) {
				$(itemDataSource).each(function(i, it) {
					controlStr += "<span><input id='c_" + item.id + i + "' onclick=\"c_checkbox_click(this)\" name='" + item.id + "' type='checkbox' value='" + itemDataSource[i].value + "'><label for='c_"+item.id+i+"'>" + itemDataSource[i].name + "</label></span>";
				});
			}
			break;
		case "radios":
			var itemDataSource = eval('(' + item.items + ')');
			if (itemDataSource) {
				$(itemDataSource).each(function(i, it) {
					controlStr += "<span><input id='c_"+item.id+"_"+i+"' name='c_"+item.id+"' type='radio' value='"+itemDataSource[i].value+"'><label for='c_"+item.id+"_"+i+"'>" + itemDataSource[i].name + "</label></span>";
				});
			}
			break;

		}
		return controlStr;

	}
	//构建input元素
	function createInputElement(item, cssCls) {
		var type = item.data_type;
		if (type == "string")
			type = "text";
		var controlStr = "<input type='" + item.data_type + "' name='c_" + item.id + "' id='c_" + item.id + "' data-id='" + item.id + "' class='" + cssCls;
		if (item.notnull) {
			controlStr += " required";
		}
		controlStr += "' />"
		return controlStr;
	}
</script>